<template>
  <div class="register-view">
    <!-- 左侧装饰区域 -->
    <div class="register-decoration">
      <div class="decoration-content">
        <div class="brand-logo">
          <div class="logo-icon">🎬</div>
          <h2 class="brand-name">家庭媒体管家</h2>
        </div>
        <p class="brand-tagline">开始您的数字记忆之旅<br>与家人分享每一份快乐</p>
        <div class="feature-highlights">
          <div class="feature-item">
            <span class="feature-icon">✨</span>
            <span class="feature-text">智能分类整理</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">🔗</span>
            <span class="feature-text">家庭成员协作</span>
          </div>
          <div class="feature-item">
            <span class="feature-icon">☁️</span>
            <span class="feature-text">云端安全存储</span>
          </div>
        </div>
      </div>

      <!-- 浮动装饰元素 -->
      <div class="floating-elements">
        <div class="float-item float-1"></div>
        <div class="float-item float-2"></div>
        <div class="float-item float-3"></div>
        <div class="float-item float-4"></div>
      </div>
    </div>

    <!-- 右侧注册表单 -->
    <div class="register-form-section">
      <div class="register-container">
        <div class="register-header">
          <h1 class="register-title">创建账户</h1>
          <p class="register-subtitle">开始您的家庭媒体管理之旅</p>
        </div>

        <form class="register-form" @submit.prevent="handleRegister">
          <div class="form-group">
            <label class="form-label" for="username">用户名</label>
            <div class="input-wrapper">
              <span class="input-icon">👤</span>
              <input
                id="username"
                v-model="form.username"
                :disabled="loading"
                class="form-input"
                placeholder="请输入用户名"
                required
                type="text"
              />
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="email">邮箱地址</label>
            <div class="input-wrapper">
              <span class="input-icon">📧</span>
              <input
                id="email"
                v-model="form.email"
                :disabled="loading"
                class="form-input"
                placeholder="请输入邮箱地址"
                required
                type="email"
              />
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="password">密码</label>
            <div class="input-wrapper">
              <span class="input-icon">🔒</span>
              <input
                id="password"
                v-model="form.password"
                :disabled="loading"
                :type="showPassword ? 'text' : 'password'"
                class="form-input"
                placeholder="请输入密码（至少6位）"
                required
              />
              <button
                class="password-toggle"
                type="button"
                @click="showPassword = !showPassword"
              >
                {{ showPassword ? '🙈' : '👁️' }}
              </button>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label" for="confirmPassword">确认密码</label>
            <div class="input-wrapper">
              <span class="input-icon">🔐</span>
              <input
                id="confirmPassword"
                v-model="form.confirmPassword"
                :disabled="loading"
                :type="showConfirmPassword ? 'text' : 'password'"
                class="form-input"
                placeholder="请再次输入密码"
                required
              />
              <button
                class="password-toggle"
                type="button"
                @click="showConfirmPassword = !showConfirmPassword"
              >
                {{ showConfirmPassword ? '🙈' : '👁️' }}
              </button>
            </div>
          </div>

          <div class="form-group">
            <label class="checkbox-wrapper agreement-checkbox">
              <input v-model="form.agreement" required type="checkbox" />
              <span class="checkbox-custom"></span>
              <span class="checkbox-text">
                我已阅读并同意
                <a class="agreement-link" href="#">《用户协议》</a>
                和
                <a class="agreement-link" href="#">《隐私政策》</a>
              </span>
            </label>
          </div>

          <button
            :disabled="loading || !isFormValid"
            class="register-btn"
            type="submit"
          >
            <span v-if="loading" class="loading-spinner">⏳</span>
            <span v-else>创建账户</span>
          </button>
        </form>

        <!-- 登录提示 -->
        <div class="login-prompt">
          <span class="login-text">已有账号？</span>
          <router-link class="login-link" to="/login">
            立即登录
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreement: false
})

const loading = ref(false)
const showPassword = ref(false)
const showConfirmPassword = ref(false)

const isFormValid = computed(() => {
  return form.value.username.trim() !== '' &&
         form.value.email.trim() !== '' &&
         form.value.password.trim() !== '' &&
         form.value.confirmPassword.trim() !== '' &&
         form.value.agreement &&
         form.value.password === form.value.confirmPassword &&
         form.value.password.length >= 6
})

const handleRegister = async () => {
  if (form.value.password !== form.value.confirmPassword) {
    alert('密码不匹配')
    return
  }

  if (form.value.password.length < 6) {
    alert('密码长度至少需要6位')
    return
  }

  if (!form.value.agreement) {
    alert('请先同意用户协议和隐私政策')
    return
  }

  loading.value = true
  try {
    // 调用真实的注册API
    const result = await authStore.register({
      username: form.value.username,
      email: form.value.email,
      nickname: form.value.nickname,
      password: form.value.password
    })

    if (result.success) {
      alert('注册成功！请登录')
      router.push('/login')
    } else {
      // 注册失败，错误信息已在store中处理
      console.error('Register failed:', result.error)
    }
  } catch (error) {
    console.error('Register failed:', error)
    alert('注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.register-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

// 左侧装饰区域
.register-decoration {
  position: relative;
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 50%, #a78bfa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-8;
  overflow: hidden;

  .decoration-content {
    max-width: 400px;
    text-align: center;
    position: relative;
    z-index: 2;

    .brand-logo {
      margin-bottom: $spacing-8;

      .logo-icon {
        font-size: 4rem;
        margin-bottom: $spacing-4;
        opacity: 0.9;
      }

      .brand-name {
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: #5b21b6;
        margin: 0;
        letter-spacing: -0.025em;
      }
    }

    .brand-tagline {
      font-size: $font-size-lg;
      color: #7c3aed;
      line-height: 1.6;
      margin-bottom: $spacing-8;
      opacity: 0.8;
    }

    .feature-highlights {
      display: flex;
      flex-direction: column;
      gap: $spacing-4;

      .feature-item {
        display: flex;
        align-items: center;
        gap: $spacing-3;
        padding: $spacing-3;
        background: rgba(255, 255, 255, 0.2);
        border-radius: $radius-lg;
        backdrop-filter: blur(10px);

        .feature-icon {
          font-size: $font-size-xl;
        }

        .feature-text {
          color: #5b21b6;
          font-weight: $font-weight-medium;
        }
      }
    }
  }

  .floating-elements {
    position: absolute;
    inset: 0;

    .float-item {
      position: absolute;
      border-radius: $radius-full;
      background: rgba(255, 255, 255, 0.1);
      animation: gentleFloat 8s ease-in-out infinite;

      &.float-1 {
        width: 90px;
        height: 90px;
        top: 20%;
        left: 15%;
        animation-delay: 0s;
      }

      &.float-2 {
        width: 70px;
        height: 70px;
        top: 65%;
        right: 20%;
        animation-delay: 2s;
      }

      &.float-3 {
        width: 50px;
        height: 50px;
        bottom: 30%;
        left: 25%;
        animation-delay: 4s;
      }

      &.float-4 {
        width: 110px;
        height: 110px;
        top: 35%;
        right: 10%;
        animation-delay: 6s;
      }
    }
  }
}

// 右侧表单区域
.register-form-section {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-6;
  background: #ffffff;

  .register-container {
    width: 100%;
    max-width: 420px;

    .register-header {
      text-align: center;
      margin-bottom: $spacing-8;

      .register-title {
        font-size: $font-size-3xl;
        font-weight: $font-weight-bold;
        color: #1e293b;
        margin-bottom: $spacing-3;
        letter-spacing: -0.025em;
      }

      .register-subtitle {
        font-size: $font-size-base;
        color: #64748b;
        margin: 0;
        line-height: 1.5;
      }
    }

    .register-form {
      .form-group {
        margin-bottom: $spacing-5;

        .form-label {
          display: block;
          margin-bottom: $spacing-2;
          font-weight: $font-weight-medium;
          color: #374151;
          font-size: $font-size-sm;
        }

        .input-wrapper {
          position: relative;
          display: flex;
          align-items: center;

          .input-icon {
            position: absolute;
            left: $spacing-4;
            font-size: $font-size-base;
            opacity: 0.6;
            z-index: 1;
          }

          .form-input {
            width: 100%;
            padding: $spacing-3 $spacing-4 $spacing-3 $spacing-12;
            border: 2px solid #e2e8f0;
            border-radius: $radius-xl;
            font-size: $font-size-base;
            background: #f8fafc;
            transition: all 0.2s ease;
            color: #1e293b;

            &:focus {
              outline: none;
              border-color: #8b5cf6;
              background: #ffffff;
              box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
            }

            &::placeholder {
              color: #94a3b8;
            }

            &:disabled {
              opacity: 0.6;
              cursor: not-allowed;
            }
          }

          .password-toggle {
            position: absolute;
            right: $spacing-4;
            background: none;
            border: none;
            font-size: $font-size-base;
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s ease;

            &:hover {
              opacity: 1;
            }
          }
        }

        &.agreement-checkbox {
          margin-bottom: $spacing-6;

          .checkbox-wrapper {
            display: flex;
            align-items: flex-start;
            gap: $spacing-3;
            cursor: pointer;
            line-height: 1.5;

            input[type="checkbox"] {
              display: none;
            }

            .checkbox-custom {
              width: 18px;
              height: 18px;
              border: 2px solid #d1d5db;
              border-radius: $radius-sm;
              position: relative;
              flex-shrink: 0;
              margin-top: 2px;
              transition: all 0.2s ease;

              &::after {
                content: '✓';
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 12px;
                font-weight: bold;
                opacity: 0;
                transition: opacity 0.2s ease;
              }
            }

            input:checked + .checkbox-custom {
              background: #8b5cf6;
              border-color: #8b5cf6;

              &::after {
                opacity: 1;
              }
            }

            .checkbox-text {
              font-size: $font-size-sm;
              color: #64748b;

              .agreement-link {
                color: #8b5cf6;
                text-decoration: none;
                font-weight: $font-weight-medium;

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }
      }

      .register-btn {
        width: 100%;
        padding: $spacing-4;
        background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
        border: none;
        border-radius: $radius-xl;
        color: white;
        font-size: $font-size-base;
        font-weight: $font-weight-semibold;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: $spacing-2;

        &:hover:not(:disabled) {
          transform: translateY(-1px);
          box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
        }

        &:active:not(:disabled) {
          transform: translateY(0);
        }

        &:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }

        .loading-spinner {
          animation: spin 1s linear infinite;
        }
      }
    }

    .login-prompt {
      text-align: center;
      margin-top: $spacing-6;
      color: #64748b;
      font-size: $font-size-sm;

      .login-text {
        margin-right: $spacing-1;
      }

      .login-link {
        color: #8b5cf6;
        text-decoration: none;
        font-weight: $font-weight-medium;
        transition: color 0.2s ease;

        &:hover {
          color: #7c3aed;
        }
      }
    }
  }
}

// 动画
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  33% {
    transform: translateY(-12px) rotate(120deg);
  }
  66% {
    transform: translateY(6px) rotate(240deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// 响应式设计
@media (max-width: $breakpoint-lg) {
  .register-view {
    grid-template-columns: 1fr;
  }

  .register-decoration {
    display: none;
  }

  .register-form-section {
    padding: $spacing-6;
  }
}

@media (max-width: $breakpoint-sm) {
  .register-form-section {
    padding: $spacing-4;

    .register-container {
      .register-header .register-title {
        font-size: $font-size-2xl;
      }

      .register-form .form-group {
        margin-bottom: $spacing-4;
      }
    }
  }
}

// 暗色主题适配
[data-theme="dark"] {
  .register-view {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  }

  .register-decoration {
    background: linear-gradient(135deg, #4c1d95 0%, #5b21b6 50%, #7c3aed 100%);

    .decoration-content {
      .brand-name {
        color: #c4b5fd;
      }

      .brand-tagline {
        color: #ddd6fe;
      }

      .feature-item {
        background: rgba(255, 255, 255, 0.1);

        .feature-text {
          color: #ddd6fe;
        }
      }
    }
  }

  .register-form-section {
    background: #1e293b;

    .register-container {
      .register-header {
        .register-title {
          color: #f1f5f9;
        }

        .register-subtitle {
          color: #94a3b8;
        }
      }

      .register-form {
        .form-label {
          color: #e2e8f0;
        }

        .input-wrapper .form-input {
          background: #334155;
          border-color: #475569;
          color: #f1f5f9;

          &:focus {
            background: #374151;
            border-color: #8b5cf6;
          }

          &::placeholder {
            color: #64748b;
          }
        }

        .checkbox-wrapper {
          .checkbox-text {
            color: #94a3b8;

            .agreement-link {
              color: #a78bfa;

              &:hover {
                color: #c4b5fd;
              }
            }
          }
        }
      }

      .login-prompt {
        color: #94a3b8;

        .login-link {
          color: #a78bfa;

          &:hover {
            color: #c4b5fd;
          }
        }
      }
    }
  }
}
</style>
